<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="user-scalable=no, width=device-width, target-densitydpi=medium-dpi">
    <meta name = "format-detection" content = "telephone=no"/> 
	<title>${code }/CNY&nbsp;买单 - 币时代移动版</title>
   	<link rel="icon" href="../../../favicon.ico" type="image/x-icon"/> 
	<link rel="shortcut icon" href="../../../favicon.ico" type="image/x-icon"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
    <div data-role="page">
 		<style type="text/css">
	    	tr td {
	    		font-weight:normal;
	    		font-size:14px;
	    	}
	    	.hidetr {
	    		display:none;
	    	}
	    </style>
        <div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="b">
            <a href="javascript:history.go(-1);" data-icon="back">返回</a>
		    <h1>${code }/CNY&nbsp;买单</h1>
		    <a href="javascript:window.location.reload();" data-icon="refresh">刷新</a>
        </div>
        
        <div data-role="content">
	        <%-- 
	        <ul data-role="listview">
		        <li><h1 style="color:red;">价格(CNY)&nbsp;&nbsp;*&nbsp;&nbsp;数量${buy.quantity }&nbsp;&nbsp;=&nbsp;&nbsp;总价(CNY)</h1></li>
		        <c:forEach items="${buys}" var="buy" varStatus="vs">
				    <li style="font-weight:normal;font-size:14px;">
					    <div style="width:100%;">
						    <span style="width:33%;background-color:yellow;">${buy.price }</span>
						    <span style="width:33%;background-color:red;">${buy.quantity }</span>
						    <span style="width:33%;text-align:right;background-color:blue;">${buy.total }</span>
					    </div>
				    </li>
				</c:forEach>
			</ul>
			--%>
			<table data-role="table" id="table-column-toggle" data-mode="columntoggle" data-column-btn-text="显示/隐藏列..." class="ui-responsive table-stroke">
				<thead>
					<tr>
						<th data-priority="1">买入价(CNY)</th>
						<th data-priority="2">买入量</th>
						<th data-priority="1">总价(CNY)</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${buys}" var="buy" varStatus="vs">
					    <c:if test="${vs.count > 10}">
					    	<tr class="hidetr">
					    </c:if>
					    <c:if test="${vs.count <= 10}">
					    	<tr>
					    </c:if>
					    	<td>${buy.price }</td>
					    	<td>${buy.quantity }</td>
					    	<td>${buy.total }</td>
					    </tr>
					</c:forEach>
				</tbody>
			</table>
			<a id="more" class="smart" href="javascript:loadMore();" data-icon="arrow-b" data-role="button">显示更多...</a>
        </div>
 		
        <div data-role="footer" data-position="fixed" data-tap-toggle="false" data-theme="b">
            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&copy; 2013 币时代版权所有</h4>
        </div>
        <script type="text/javascript">
        	function loadMore() {
        		$(".hidetr").each(function(i) {
        			if (i <= 10) {
        				$(this).removeClass("hidetr");
        			}
        		});
        		if ($(".hidetr").size() <= 0) {
        			$("#more").hide();
        		}
        	}
        </script>
    </div>
</body>
</html>
